<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/tax/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">添加税务申报</text>
					</view>
				</navigator>
			</view>
			<view slot="right" class="navbar-right">
				<view class="btn-save" @click="saveTaxReturn">保存</view>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="form-card">
				<view class="form-row">
					<view class="form-field">
						<view class="label-wrapper">
							<text class="form-label">税种</text>
						</view>
						<picker mode="selector" :range="taxTypes" range-key="label" v-model="selectedTaxType"
							@change="onTaxTypeChange" class="form-picker">
							<view class="picker-display">
								{{ selectedTaxType === -1 ? '请选择税种' : taxTypes[selectedTaxType].label }}
							</view>
						</picker>
					</view>
				</view>

				<view class="form-row">
					<view class="form-field">
						<view class="label-wrapper">
							<text class="form-label">申报期间</text>
						</view>
						<picker mode="date" start="2010-01-01" :end="currentYearMonth" :value="selectedPeriod"
							fields="month" @change="onPeriodChange" class="form-picker">
							<view class="picker-display">{{ selectedPeriod || '请选择期间' }}</view>
						</picker>
					</view>
				</view>

				<view class="form-row">
					<view class="form-field">
						<view class="label-wrapper">
							<text class="form-label">申报金额</text>
							<text class="currency-symbol">¥</text>
						</view>
						<input type="number" placeholder="请输入申报金额" class="form-input" v-model="taxAmount"
							@input="validateAmount">
					</view>
				</view>

				<view class="form-row">
					<view class="form-field">
						<view class="label-wrapper">
							<text class="form-label">申报截止日期</text>
						</view>
						<picker mode="date" start="2010-01-01" end="2099-12-31" :value="dueDate"
							@change="onDueDateChange" class="form-picker">
							<view class="picker-display">{{ dueDate || '请选择截止日期' }}</view>
						</picker>
					</view>
				</view>

				<view class="form-row">
					<view class="form-field">
						<view class="label-wrapper">
							<text class="form-label">备注</text>
						</view>
						<textarea placeholder="请输入备注信息" class="form-textarea" v-model="taxRemarks" rows="3"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 税种列表
				taxTypes: [{
						value: 'vat',
						label: '增值税'
					},
					{
						value: 'income',
						label: '企业所得税'
					},
					{
						value: 'personal',
						label: '个人所得税'
					},
					{
						value: 'stamp',
						label: '印花税'
					},
					{
						value: 'other',
						label: '其他税种'
					}
				],
				selectedTaxType: -1,

				// 申报期间
				selectedPeriod: '',
				currentYearMonth: this.formatYearMonth(new Date()),

				// 申报金额
				taxAmount: '',

				// 截止日期
				dueDate: '',

				// 备注
				taxRemarks: ''
			};
		},
		onLoad() {
			console.log('添加税务申报页面加载完成');

			// 默认选中当前月份
			this.selectedPeriod = this.currentYearMonth;

			// 默认设置截止日期为下个月15号
			const nextMonth = new Date();
			nextMonth.setMonth(nextMonth.getMonth() + 1);
			nextMonth.setDate(15);
			this.dueDate = this.formatDate(nextMonth);
		},
		methods: {
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 格式化年月
			formatYearMonth(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');

				return `${year}-${month}`;
			},

			// 税种变更
			onTaxTypeChange(e) {
				this.selectedTaxType = e.detail.value;
			},

			// 申报期间变更
			onPeriodChange(e) {
				this.selectedPeriod = e.detail.value;
			},

			// 截止日期变更
			onDueDateChange(e) {
				this.dueDate = e.detail.value;
			},

			// 验证金额
			validateAmount() {
				if (this.taxAmount && parseFloat(this.taxAmount) < 0) {
					this.taxAmount = '';
					uni.showToast({
						title: '金额不能为负数',
						icon: 'none'
					});
				}
			},

			// 保存税务申报
			saveTaxReturn() {
				// 表单验证
				if (this.selectedTaxType === -1) {
					uni.showToast({
						title: '请选择税种',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedPeriod) {
					uni.showToast({
						title: '请选择申报期间',
						icon: 'none'
					});
					return;
				}

				if (!this.taxAmount || parseFloat(this.taxAmount) <= 0) {
					uni.showToast({
						title: '请输入有效的申报金额',
						icon: 'none'
					});
					return;
				}

				if (!this.dueDate) {
					uni.showToast({
						title: '请选择截止日期',
						icon: 'none'
					});
					return;
				}

				// 模拟保存数据
				const newTaxReturn = {
					id: Date.now().toString(),
					type: this.taxTypes[this.selectedTaxType].value,
					returnNo: `TZ${this.selectedPeriod.replace('-', '')}${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
					period: this.selectedPeriod,
					dueDate: this.dueDate,
					amount: parseFloat(this.taxAmount),
					status: 'pending',
					createdAt: new Date().toISOString(),
					submitDate: '',
					remarks: this.taxRemarks || ''
				};

				// 获取本地存储的税务申报数据
				let taxReturns = uni.getStorageSync('taxReturns') || [];

				// 添加新的税务申报
				taxReturns.unshift(newTaxReturn);

				// 保存到本地存储
				uni.setStorageSync('taxReturns', taxReturns);

				// 显示成功提示
				uni.showToast({
					title: '税务申报添加成功',
					icon: 'success'
				});

				// 返回税务申报列表页面
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.navbar-right {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.btn-save {
		background: transparent;
		border: none;
		font-size: 14px;
		color: #1e88e5;
		font-weight: 500;
	}

	/* 主内容区样式 */
	.content-container {
		margin: 0 auto;
		padding: 16px;
	}

	/* 表单卡片样式 */
	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	/* 表单行样式 */
	.form-row {
		margin-bottom: 16px;
	}

	/* 表单字段样式 */
	.form-field {
		display: flex;
		flex-direction: column;
	}

	/* 标签包装器 */
	.label-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
	}

	/* 表单标签样式 */
	.form-label {
		font-size: 14px;
		color: #1f2937;
	}

	/* 货币符号样式 */
	.currency-symbol {
		font-size: 14px;
		color: #6b7280;
		margin-left: 4px;
	}

	/* 表单选择器样式 */
	.form-picker {
		width: 100%;
	}

	.picker-display {
		width: 100%;
		padding: 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
	}

	/* 表单输入框样式 */
	.form-input {
		width: 100%;
		padding: 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	/* 表单文本域样式 */
	.form-textarea {
		width: 100%;
		padding: 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		min-height: 80px;
	}
</style>